<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../semantic/dist/semantic.css">
    <title>Semantic UI</title>
    <style>
    .ui.cards>.card>.image>img {
        height: 400px;
    }
    </style>
</head>

<body>

    <div class="ui container">

        <div class="ui dividing header">学习一下Api如何使用</div>

        <div class="ui secondary fade animated button">
            <div class="visible content">电影榜</div>
            <div class="hidden content">点我获取</div>
        </div>

        <div class="ui divider"></div>

        <div class="four doubling stackable ui cards"></div>

    </div>

    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../semantic/dist/semantic.js"></script>
    <script>
    $.fn.api.settings.api = {
        'posts': './movie.json'
    };
    $('.ui.secondary.button').api({
        action: 'posts',
        urlData: {
            type: 'movie',
            tag: '热门',
            page_limit: 40,
            page_start: 0
        },
        onSuccess: function (response) {
            if($.isArray(response.subjects)) {
                $(response.subjects).each(function(k, v) {
                    var html = `
                    <div class="card">
                        <div class="image"><img src="${v.cover}" alt="" /></div>
                        <div class="content">
                            <div class="header">${v.title}</div>
                            <div class="meta">
                                <span class="date"> ${v.rate} 分</span>
                            </div>
                            <div class="description"> ${v.id} 号</div>
                        </div>
                        <div class="extra content">
                            <div class="left floated">
                                <i class="star icon"></i> ${v.rate} 分
                            </div>
                            <div class="right floated">
                                <i class="video play icon"></i> ${v.playable ? '是' : '否'}
                            </div>
                        </div>
                    </div>
                    `;
                    $('.ui.cards').append(html);
                })
            }
        }
    })
    </script>
</body>

</html>
